<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-title" class="form-control" data-rule="required" name="row[title]" type="text" value="{$row.title|htmlentities}">
        </div>
    </div>
    <input id="c-type" class="form-control" name="row[type]" type="hidden" value="package">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('套餐价格')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-price" class="form-control" data-rule="required" name="rules[price]" type="number" value="{$row.rules.price|htmlentities}">
        </div>
    </div>

    <div id="app" v-cloak>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">活动商品:</label>
            <div class="col-xs-12 col-sm-8">
                <button class="btn btn-info wanl-link" @click="goodsLink" type="button"><i class="fa fa-bars"></i> 选择
                </button>
            </div>
        </div>
        <div class="form-group" v-if="goods_ids.length >0">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                       data-operate-del="1"
                       width="100%">

                    <thead>
                    <tr>
                        <th style="text-align: center; vertical-align: middle; " data-field="id">
                            <div class="th-inner ">商品信息</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th style="text-align: center; vertical-align: middle; " data-field="id">
                            <div class="th-inner ">选择规格</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th style="text-align: center; vertical-align: middle; width: 100px" >
                            <div class="th-inner ">数量</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th style="text-align: center; vertical-align: middle; " data-field="shop.shopname">
                            <div class="th-inner ">操作</div>
                            <div class="fht-cell"></div>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,index) in goods" :key="index">
                        <td style="text-align: center; vertical-align: middle; ">
                            {{item.title}}
                            <img class="img-sm img-center" :src="item.image"/>
                        </td>
                        <td style="text-align: center; vertical-align: middle; ">
                            <input type="hidden" :name=`goods[${index}][id]` :value="sku[item.id] ? sku[item.id].id : 0">
                            <input type="hidden" :name=`goods[${index}][goods_id]` :value="item.id">
                            <select :name=`goods[${index}][sku_id]` id="" class="form-control" :value="sku[item.id] ? sku[item.id].sku_id : 0">
                                <option value="0">不限</option>
                                <option v-for="sku in item.sku" :value="sku.id">{{sku.difference}} 供货价: {{sku.supply_price}}</option>
                            </select>
                        </td>
                        <td style="text-align: center; vertical-align: middle; ">
                            <input class="form-control" type="number" :name=`goods[${index}][stock]` :value="sku[item.id] ? sku[item.id].stock : 1">
                        </td>
                        <td style="text-align: center; vertical-align: middle; ">
                            <a href="javascript:;" class="btn btn-xs btn-danger" data-toggle="tooltip" title="移除"
                               @click="remove(index)"><i class="fa fa-trash"></i></a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>


        <input id="c-goods_ids" class="form-control" name="row[goods_ids]" type="hidden" :value="goods_ids_input">
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
